<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>

    </style>
  </head>
  <body>
    <div id="app">
      <el-container>
        <el-header style="background-color: rgb(0,0,0)">
          <h1 style="color: white;font-size: 22px">
            YXMall商城后台管理系统
            <span v-if="user.nickname!=null"
                  style="float: right;font-size: 15px">欢迎{{user.nickname}}回来
                    <a href="javascript:void(0)" @click="logout()">退出登录</a>
                </span>
          </h1>
        </el-header>
        <el-container>
          <el-aside width="200px">
            <el-menu style="height: 500px"
                     @select="handleSelect"
                     default-active="2"
                     class="el-menu-vertical-demo">

              <el-submenu index="1">
                <template slot="title">
                  <i class="el-icon-s-flag"></i>
                  <span>分类管理</span>
                </template>
                <el-menu-item index="1-1">分类列表</el-menu-item>
                <el-menu-item index="1-2">添加分类</el-menu-item>
              </el-submenu>

              <el-submenu index="2">
                <template slot="title">
                  <i class="el-icon-picture"></i>
                  <span>轮播图管理</span>
                </template>
                <el-menu-item index="2-1">轮播图列表</el-menu-item>
                <el-menu-item index="2-2">添加轮播图</el-menu-item>
              </el-submenu>

              <el-submenu index="3">
                <template slot="title">
                  <i class="el-icon-shopping-cart-2"></i>
                  <span>商品管理</span>
                </template>
                <el-menu-item index="3-1">商品列表</el-menu-item>
                <el-menu-item index="3-2">商品品牌</el-menu-item>
              </el-submenu>

              <el-submenu index="4">
                <template slot="title">
                  <i class="el-icon-shopping-cart-2"></i>
                  <span>订单管理</span>
                </template>
                <el-menu-item index="4-1">已处理订单列表</el-menu-item>
                <el-menu-item index="4-2">未处理订单列表</el-menu-item>
              </el-submenu>

              <el-submenu index="5">
                <template slot="title">
                  <i class="el-icon-shopping-cart-2"></i>
                  <span>公告管理</span>
                </template>
                <el-menu-item index="5-1">公告列表</el-menu-item>
                <el-menu-item index="5-2">添加公告</el-menu-item>
              </el-submenu>

            </el-menu>
          </el-aside>
          <el-main>
            <div>
              <div style="border: 2px solid #d3dce6;height: 60px;width:600px;top: 10px;line-height: 60px" >
                <i class="el-icon-document">品牌列表</i>
                <el-button style="float: right;top: 10px;position: relative" type="success"
                           @click="brandInsert"
                >添加品牌</el-button>
              </div>
              <div style="border: 2px solid #d3dce6;top: 10px;width:600px;position: relative">
                <el-table
                        @selection-change="handleSelectionChange"
                        :data="brandArr"
                        style="width: 100%">
                  <el-table-column
                          type="selection"
                          width="55">
                  </el-table-column>
                  <el-table-column type="index" label="编号"></el-table-column>
                  <el-table-column
                          prop="name"
                          label="品牌名称"
                          width="180">
                  </el-table-column>
                  <el-table-column label="操作">
                    <template slot-scope="scope">
                      <el-button size="mini" @click="brandUpdate(scope.row)"
                                 type="success">修改</el-button>
                      <el-popconfirm
                              title="您确定删除此品牌吗?"
                              @confirm="brandDelete(scope.$index, scope.row)"
                      >
                        <el-button slot="reference"  size="mini"
                                   type="danger">删除</el-button>
                      </el-popconfirm>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </body>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

  <!-- import Vue before Element -->
  <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
  <!-- import JavaScript -->
  <script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
  <script>
    let v = new Vue({
      el: '#app',
      data: function() {
        return {
          isShowInsertBrand:false,
          isShowUpdate:false,
          isShowInsertProduct:false,
          dialogImageUrl: '',
          dialogVisible: false,
          currentIndex:"1-1",
          categoryArr:[],
          bannerArr:[],
          showProductArr:[],
          productArr:[],
          orderArr:[],
          user:{},
          p:{
            title:"",
            url:"",
            storage:"",
            price:"",
            oldPrice:"",
            content:"",
            categoryId:"",
            brandId:"",
          },
          oldUrl:"",
          oldContent:"",
          brandArr:[],
          pageIndex: 1, // 第几页
          pageSize: 3, // 每页几条数据
          total: 0, // 总条目数
        }
      },
      methods:{
        brandInsert(){
          let name = prompt("请输入品牌的名称");
          if (name==null){
            return;
          }
          if (name==''){
            v.$message.error("品牌名称不能为空");
            return;
          }
          axios.get("/brand/insert?name="+name).then(function (response) {
            v.brandArr = response.data;

          })
        },
        brandUpdate(brand){
          let name = prompt("请输入新的品牌名称");
          //点击取消
          if (name==null){
            return;
          }
          if (name==''){
            v.$message.error("分类名称不能为空");
            return;
          }
          //创建新对象
          let c = {id:brand.id,name:name};
          //发出修改请求  把分类对象传递过去
          axios.post("/brand/update",c).then(function () {
            brand.name=name;
          })
        },
        brandDelete(index,brand){
          //发请求删除品牌
          axios.get("/brand/delete?id="+brand.id).then(function () {
            //删除数组中的元素  (删除位置,删除数量)
            v.brandArr.splice(index,1);
          })
        },
        categoryUpdate(category){
          let name = prompt("请输入新的分类名称");
          //点击取消
          if (name==null){
            return;
          }
          if (name==''){
            v.$message.error("分类名称不能为空");
            return;
          }
          //创建新对象
          let c = {id:category.id,name:name};
          //发出修改请求  把分类对象传递过去
          axios.post("/category/update",c).then(function () {
            category.name=name;
          })
        },
        categoryDelete(index,category){
          //发请求删除分类
          axios.get("/category/delete?id="+category.id).then(function () {
            //删除数组中的元素  (删除位置,删除数量)
            v.categoryArr.splice(index,1);
          })
        },
        handleSelect(key,keyPath){
          if (key=='1-1'){
            //跳转到添加轮播图页面
            location.href="/admin.html";
          }
          if (key=='1-2'){
            let name = prompt("请输入分类的名称");
            //点击取消
            if (name==null){
              return;
            }
            if (name==''){
              v.$message.error("分类名称不能为空");
              return;
            }
            //发出添加分类的请求
            axios.get("/category/insert?name="+name).then(function (response) {
              //添加分类后把所有的分类请求回来赋值给数组
              v.categoryArr = response.data;
            })
          }else if (key=='2-2'){
            //跳转到添加轮播图页面
            location.href="/insertBanner.html";
          }else if (key=='3-1'){
            //跳转到添加轮播图页面
            location.href="/insertProduct.html";
          }
          else{
            v.currentIndex = key;
          }
        },
        /****************商品批量操作********************/
        //勾选表格多选框
        handleSelectionChange(val) {
          this.multipleSelection = val  //当前选中行的数据
        },
        deleteAllSelection() {
          if (this.multipleSelection.length > 0) {
            this.$confirm('此操作将删除选中项,是否继续', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              const idList = []
              for (const v of this.multipleSelection) {
                idList.push(v.id)
              }
              this.deleteSelectAllProducts(idList)
            }).catch(() => {

            })
          } else {
            this.$notify({
              title: '提示',
              message: '请勾选要提交的项！',
              type: 'warning',
              duration: 2000
            })
          }
        },
        //批量删除商品
        deleteSelectAllProducts(idList) {
          axios.post("/product/deleteSelectAllProducts",idList).then(function (response) {
            v.productArr = response.data;
            v.total = v.productArr.length;
            v.showProductArr = v.productArr.slice((v.pageIndex - 1) * v.pageSize, v.pageIndex * v.pageSize);
          })
        },
        /************************************/

        /****************商品增删查、分页***********************/
        getShowProductArr() {
          //获取截取开始索引
          let begin = (v.pageIndex - 1) * v.pageSize;
          //获取截取结束索引
          let end = v.pageIndex * v.pageSize;
          //通过索引去截取，从而展示
          v.showProductArr = v.productArr.slice(begin, end);
        },
        //页数改变，重新截取
        handleCurrentChange(val) {
          v.pageIndex = val;
          this.getShowProductArr();
        },
        //条目数改变，也重新截取
        handleSizeChange(val) {
          v.pageIndex = 1;
          v.pageSize = val;
          this.getShowProductArr();
        },
        productDelete(index,product){
          axios.get("/product/delete?id="+product.id).then(function (response) {
            v.productArr.splice(index,1)
          })
        },
        productUpdate(product){
          location.href="/updateProduct.html?id="+product.id;
        },
        insert(){
          //发出添加商品的请求
          axios.post("/product/insert",v.p).then(function (response) {
            v.productArr = response.data;
            v.total = v.productArr.length;
            v.showProductArr = v.productArr.slice((v.pageIndex - 1) * v.pageSize, v.pageIndex * v.pageSize);
          })
        },
        handleInsertProduct() {
          this.p = {
            title:"",
            url:"",
            storage:"",
            price:"",
            oldPrice:"",
            content:"",
            categoryId:"",
            brandId:"",
          },
                  this.isShowInsertProduct=true;
        },
        handleSuccess(response,file,fileList){
          v.p.url = response;
        },
        handleSuccess2(response,file,fileList){
          v.p.content = response;
        },
        handleRemove(file, fileList) {
          console.log(file, fileList);
          axios.get("/remove?url=" + v.p.url).then(function () {
            v.p.url = "";
          });
          axios.get("/remove?url="+v.p.content).then(function () {
            v.p.content="";
          })
        },
        handlePictureCardPreview(file) {
          this.dialogImageUrl = file.url;
          this.dialogVisible = true;
        }
        /***************************************/
      },
      created:function () {
        //发请求获取分类信息
        axios.get("/category/select").then(function (response) {
          v.categoryArr = response.data;
        });
        //发请求获取品牌信息
        axios.get("/brand/select").then(function (response) {
          v.brandArr = response.data;
        });
        //发请求获取轮播图数据
        axios.get("/banner/select").then(function (response) {
          v.bannerArr = response.data;
        });
        //发请求获取所有商品数据
        axios.get("/product/select/admin").then(function (response) {
          v.productArr = response.data;
          v.total = v.productArr.length;
          v.showProductArr = v.productArr.slice((v.pageIndex - 1) * v.pageSize, v.pageIndex * v.pageSize);
        });
        //发请求获取当前登录的用户对象
        axios.get("/currentUser").then(function (response) {
          v.user = response.data;
          if (v.user==""){
            alert("请先登录!")
            location.href="/login.html"
          }
        })
      }
    })
  </script>
</html>